<template>
  <view>
    <!-- <view class="p-12 bg-white">
			<u-search :placeholder="'搜索'" :border="false" :clearable="false" :show-action="false"></u-search>
		</view> -->
    <view class="bg-white">
      <u-tabs
        :list="tabsList"
        :current="current"
        line-color="#5eb292"
        :scrollable="false"
        @change="changeNav"
        v-if="showTabs"
        :activeStyle="{
          color: '#5eb292',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
        }"
        itemStyle="height: 44px;"
      >
      </u-tabs>

      <z-paging
        ref="paging"
        v-model="orderList"
        @query="queryList"
        scrollable
        height="calc(100vh - 44px - 40px)"
        :fixed="false"
        :auto-hide-loading-after-first-loaded="false"
        :use-page-scroll="false"
      >
        <template #loading>
          <view
            class="h-full w-full flex justify-center items-center"
            v-if="orderLoading"
          >
            <u-loading-icon></u-loading-icon>
          </view>
        </template>
        <view
          class="mt-12 bg-white"
          v-for="(item, index) in orderList"
          :key="index"
        >
          <view class="flex items-center p-12">
            <u-image
              radius="4px"
              width="24px"
              height="24px"
              src="https://qxt-oss.yummall.cn/1762452183367946240/image/m0oyxuxy-1kai3bkj9.jpg"
            ></u-image>
            <view class="flex w-full border-box justify-between px-12">
              <view class="flex">
                <view class="text-14 mr-8 ellipsis-1">程厂长</view>
                <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
              </view>
              <view class="color-tip text-14">交易关闭</view>
            </view>
          </view>
          <view
            class="flex p-12 bg-white"
            v-for="(item2, index2) in item.orderGoodsList"
            :key="index2"
            @click="goDetail(item2)"
          >
            <u-image
              width="180rpx"
              height="180rpx"
              :src="item2.goodsImgUrl"
            ></u-image>
            <view class="pl-10 pt-10 flex-1">
              <view class="h-44">
                <view class="ellipsis-2 color-black">{{
                  item2.goodsName
                }}</view>
              </view>
              <view class="ellipsis-2 color-tip pt-8 text-14">{{
                item2.goods ? item2.goodsSkuInfo.skuText : "无规格"
              }}</view>
              <view class="flex justify-between pt-12">
                <view class="text-16">
                  <text class="text-14">￥</text> {{ item2.goodsPrice }}
                </view>
                <view class="text-14">x {{ item2.quantity }}</view>
              </view>
            </view>
          </view>
          <view class="flex justify-end pt-8 px-12">
            <view>
              <text class="color-tip text-12 mr-12">共1件</text>
              <text class="color-tip text-12 mr-12"
                >总价 ￥{{ item.totalAmount }}</text
              >
              <text class="color-black text-14">实付 </text>
              <text class="text-red text-14">￥</text>
              <text class="text-red text-18">{{ item.payAmount }}</text>
            </view>
          </view>
          <view class="flex justify-end gap-8 p-12">
            <view>
              <u-button
                text="删除订单"
                shape="circle"
                @click="onDelete(item)"
                :custom-style="{ height: '56rpx', border: '1rpx solid #666' }"
              ></u-button>
            </view>
            <view>
              <u-button
                text="再次购买"
                shape="circle"
                @click="onBuyAgain(item)"
                :custom-style="{ height: '56rpx', border: '1rpx solid #666' }"
              ></u-button>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<script>
import { fetchUniflyOrderList, fetchCustomerOrderList } from "@/services/api";
import { isEmpty } from "@/utils";
export default {
  data() {
    return {
      showTabs: false,
      orderList: [],
      orderLoading: false,
      current: 0,
      tabsList: [
        {
          name: "待付款",
        },
        {
          name: "待发货",
        },
        {
          name: "待收货",
        },
        {
          name: "已完成",
        },
      ],
    };
  },
  methods: {
    changeNav({ index }) {
      this.current = index;
      this.$refs.paging.reload();
    },
    goHome() {
      this.$Router.pushTab({
        name: "index",
      });
    },
    //获取购物车列表
    async queryList(pageNum, pageSize) {
      //当前状态的订单列表是否为空
      switch (this.current) {
        case 0:
          this.getUnPay(pageNum, pageSize);
          break;
        case 1:
          break;
        case 2:
          break;
        case 3:
          this.getPayComplete(pageNum, pageSize);
          break;
      }
    },
    // 未支付
    async getUnPay(pageNum, pageSize) {
      this.orderLoading = true;
      const { data, error } = await fetchUniflyOrderList({
        pagination: {
          pageSize,
          pageNum,
        },
      });
      if (!error) {
        const res =
          data?.map((item) => {
            return {
              ...item,
              orderGoodsList: item.orderGoodsList.map((itm) => ({
                ...itm,
                goodsSkuInfo: JSON.parse(itm.goodsSkuInfo),
              })),
            };
          }) || [];
        this.$refs.paging.complete(res);
      } else {
        this.$refs.paging.complete(false);
      }
      this.orderLoading = false;
    },
    // 已支付
    async getPayComplete(pageNum, pageSize) {
      this.orderLoading = true;
      const { data, error } = await fetchCustomerOrderList({
        pagination: {
          pageSize,
          pageNum,
        },
      });
      if (!error) {
        this.$refs.paging.complete(data);
      } else {
        this.$refs.paging.complete(false);
      }
      this.orderLoading = false;
    },
    goDetail(item) {
      this.$Router.push({
        name: "goodsDetail",
        params: {
          serialNo: item.serialNo,
        },
      });
    },
  },
  onLoad(options) {
    this.showTabs = true;
    this.current = options.type - 0;
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped></style>
